<template>
  <div class="institution-container">
    <el-row>
      <div class="left">
        <el-card class="left-card">
          <el-tree
            :expand-on-click-node="false"
            node-key="id"
            :data="data"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            @node-click="treeNodeClick"
          />
        </el-card>
      </div>
    </el-row>
    <el-row class="right">
      <div class="right-top">
        <el-card class="right-card">
          <div slot="header" class="clearfix">
            <span>机构信息</span>
          </div>
          <el-row>
            <el-form label-width="auto">
              <el-row type="flex" justify="start">
                <el-form-item label="机构编号">
                  <el-col :span="8">
                    <el-input
                      v-model="form.id"
                      :disabled="disabled"
                      class="inputStyle"
                      placeholder="机构编号"
                    />
                  </el-col>
                </el-form-item>
                <el-form-item label="机构名称">
                  <el-col :span="8">
                    <el-input
                      v-model="form.name"
                      :disabled="disabled"
                      class="inputStyle"
                      placeholder="机构名称"
                    />
                  </el-col>
                </el-form-item>
                <el-form-item label="机构类型">
                  <el-col :span="8">
                    <el-select
                      v-model="form.type"
                      class="inputStyle"
                      placeholder="机构类型"
                      :disabled="disabled"
                    >
                      <el-option label="一级转运" :value="1" />
                      <el-option label="二级转运" :value="2" />
                      <el-option label="网点" :value="3" />
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-row>
              <el-row type="flex" justify="start">
                <el-form-item label="机构地址">
                  <el-col :span="8">
                    <el-select
                      v-model="(form.province || {}).name"
                      placeholder="省"
                      class="selectStyle"
                      :disabled="disabled"
                      @change="getAreaCity"
                    >
                      <el-option
                        v-for="item in area.province"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      v-model="(form.city || {}).name"
                      placeholder="市"
                      class="selectStyle"
                      :disabled="disabled"
                      @change="getAreaCounty"
                    >
                      <el-option
                        v-for="item in area.city"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      v-model="(form.county || {}).name"
                      placeholder="县"
                      class="selectStyle"
                      :disabled="disabled"
                    >
                      <el-option
                        v-for="item in area.county"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-row>
              <el-row type="flex" justify="start">
                <el-form-item label="详细地址">
                  <el-col :span="8">
                    <el-input
                      v-model="form.address"
                      :disabled="disabled"
                      class="inputStyle"
                      placeholder="详细地址"
                    />
                  </el-col>
                </el-form-item>
                <el-form-item label="经度">
                  <el-col :span="8">
                    <el-input
                      v-model="form.longitude"
                      :disabled="disabled"
                      class="inputStyle"
                      placeholder="经度"
                    />
                  </el-col>
                </el-form-item>
                <el-form-item label="纬度">
                  <el-col :span="8">
                    <el-input
                      v-model="form.latitude"
                      :disabled="disabled"
                      class="inputStyle"
                      placeholder="纬度"
                    />
                  </el-col>
                </el-form-item>
              </el-row>
              <el-row type="flex" justify="start">
                <el-form-item label="机构负责人">
                  <el-col :span="8">
                    <el-input
                      v-model="form.managerName"
                      :disabled="disabled"
                      class="inputStyle"
                      placeholder="机构负责人"
                    />
                  </el-col>
                </el-form-item>
                <el-form-item label="机构电话">
                  <el-col :span="8">
                    <el-input
                      v-model="form.phone"
                      :disabled="disabled"
                      class="inputStyle"
                      placeholder="机构电话"
                    />
                  </el-col>
                </el-form-item>
              </el-row>
              <el-form-item class="editBox">
                <template>
                  <el-row type="flex" justify="center">
                    <el-button
                      v-if="disabled"
                      size="small"
                      type="success"
                      class="buttonStyle"
                      @click="editClick"
                    >编辑</el-button>
                    <el-button
                      v-else
                      size="small"
                      type="success"
                      class="buttonStyle"
                      @click="saverClick"
                    >保存</el-button>
                  </el-row>
                </template>
              </el-form-item>
            </el-form>
          </el-row>
        </el-card>
      </div>
      <div class="right-bottom">
        <el-card class="right-card">
          <div slot="header" class="clearfix">
            <span>员工信息</span>
          </div>
          <el-row>
            <el-table border stripe :data="tableData" style="width: 100%">
              <el-table-column
                prop="date"
                align="center"
                label="序号"
                width="50"
              >
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="133"
                prop="userId"
                label="员工编号"
              />
              <el-table-column
                align="center"
                width="133"
                prop="name"
                label="员工姓名"
              />
              <el-table-column
                align="center"
                width="133"
                prop="mobile"
                label="手机号"
              />
              <el-table-column
                align="center"
                width="133"
                prop="agency.name"
                label="所属机构"
              />
              <el-table-column
                align="center"
                width="133"
                prop="account"
                label="系统账户"
              />
              <el-table-column
                align="center"
                width="133"
                prop="roleNames[0]"
                label="系统角色"
              />
              <el-table-column
                align="center"
                width="133"
                prop="status"
                label="账号状态"
              />
              <template slot="empty">
                <el-empty :image-size="70" description="暂无数据" />
              </template>
            </el-table>
          </el-row>
          <el-row
            style="margin-top: 10px; height: 40px"
            type="flex"
            justify="center"
            align="middle"
          >
            <el-pagination
              :current-page="form.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-count="pages"
              :page-size="form.pageSize"
              :pager-count="7"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="sizeChange"
              @current-change="gurrentChange"
            />
          </el-row>
        </el-card>
      </div>
    </el-row>
  </div>
</template>

<script>
import {
  getOrgDetailAPI,
  getOrgTreeAPI,
  getScopeEmployeeAPI,
  getAreaAPI
} from '@/api/data'
export default {
  data() {
    return {
      // 机构数据
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      // 表单数据
      form: {},
      // 表格数据
      tableData: [],
      // 表单禁用
      disabled: true,
      // 机构树配置
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 省市区
      area: {
        province: '',
        city: '',
        county: ''
      },
      // 分页
      page: 1,
      pageSize: 4,
      pages: 1,
      total: 0,
      // 定时器
      timer: null
    }
  },
  created() {
    this.treeData()
    this.areasData()
  },
  methods: {
    // 机构树
    async treeData() {
      const result = await getOrgTreeAPI()
      this.data = JSON.parse(result.data.data)
    },
    // 编辑
    editClick() {
      this.disabled = false
    },
    // 保存
    saverClick() {
      this.disabled = true
    },
    // 机构树点击事件
    treeNodeClick(key, node, tree) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        getOrgDetailAPI(key.id).then(({ data }) => {
          const formData = data.data
          this.form = formData
        })
        getScopeEmployeeAPI(this.page, this.pageSize, key.id).then(
          ({ data }) => {
            const courierList = data.data
            this.total = +courierList.counts
            this.pages = +courierList.pages
            this.tableData = courierList.items
          }
        )
      }, 500)
    },
    // 省市区
    async areasData() {
      const { data } = await getAreaAPI()
      this.area.province = data.data
    },
    async getAreaCity() {
      const { data } = await getAreaAPI(this.form.ProvinceId)
      this.area.city = data.data
      this.form.cityId = null
      this.form.countyId = null
      this.areas.county = []
    },
    async getAreaCounty() {
      const { data } = await getAreaAPI(this.form.CityId)
      this.areas.county = data.data
      this.form.countyId = null
    },
    // 当前页数改变
    sizeChange(pageSize) {
      this.pageSize = pageSize
      this.treeNodeClick(this.form)
    },
    // 当前页改变
    gurrentChange(page) {
      this.page = page
      this.treeNodeClick(this.form)
    }
  }
}
</script>

<style scoped lang="scss" >
.institution-container {
  display: flex;
  padding: 10px;
  height: 100%;
  .left {
    padding: 0 10px;
    width: 260px;
    height: 100%;

    .left-card {
      height: 100%;

      ::v-deep .el-card__body {
        padding: 0;
        padding-top: 9px;
        padding-left: 5px;
      }

      // :v-deep el-tree-node__content {
      //   line-height: 30px;
      // }
    }
  }

  .right {
    .right-card {
      ::v-deep .el-card__header {
        background-color: #fafafa;
        font-size: 14px;
        font-weight: bold;
      }
      ::v-deep .el-card__body {
        padding: 20px;
      }
    }
    .inputStyle {
      width: 250px;
    }

    .selectStyle {
      width: 302px;
    }
    .right-top {
      padding: 0 10px;
      width: 100%;
      margin-bottom: 20px;

      .editBox {
        margin: 0;
        .buttonStyle {
          width: 80px;
          height: 30px;
          background-color: #189450;
          border-color: #189450;
        }
      }
    }
    .right-bottom {
      padding: 0 10px;
      width: 100%;
      height: 100%;
      ::v-deep .el-card__body {
        padding-bottom: 7px;
      }
    }
  }
}
// ::v-deep
::v-deep .el-form-item__label {
  font-size: 13px;
}
::v-deep .el-table thead tr th {
  font-size: 13px;
  font-weight: bold;
  background: #f8faff !important;
  border: none;
}
::v-deep .el-table tbody tr td {
  font-size: 13px;
  color: #606266;
  border: none;
}

::v-deep .el-tree-node__content {
  height: 35px;
  background-color: transparent;

  & > .el-tree-node__label {
    font-size: 14px;
    &:hover {
      background-color: #f5f7fa;
      font-weight: 900;
      color: #189450;
    }
  }
}

::v-deep .el-tree-node__content {

  & > .el-tree-node__children {
     & >  .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__content > .el-tree-node__label {
          color: #818693;
       font-size: 12px;
      &:hover {
        background-color: #f5f7fa;
        font-weight: 900;
        color: #189450;
      }
    }
  }
}
</style>
